@import "../../style/base.styl"

.upload-area {
  position: relative;
  width: 100%;
  height: 300rem;
  border: 4rem dashed var(--third-text-color)
  box-sizing border-box
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  &.focus {
    border-color: var(--upload-area-focus-color);
  }

  &:hover {
    border-color: var(--upload-area-focus-color);
  }

  label {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    cursor: pointer;
  }

  input[type="file"] {
    position: absolute;
    left: -9999rem;
    top: -9999rem;
  }

  .tips {
    text-align: center;
    color: #aaa;

    .icon {
      font-size: 100rem;
      margin-bottom: 10rem;
    }

    .text {
      cursor: default;
      font-size: 20rem;
    }
  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

}
